
import { useAppSelector } from '@/utils/tools/store'
import { Page, Image, Tabs, getClassNames, Button } from 'magic-ui-react'
import { useRef, useState } from 'react'
import BaseInfo from './coms/BaseInfo'
import RoleInfo from './coms/RoleInfo'
import styles from './styles.module.less'

const PersonalCenter = () => {
  const { userInfo } = useAppSelector(state => state.user)
  const [activeTab, setActiveTab] = useState('baseInfo');

  const menus: any = {
    baseInfo: {
      label: '基本信息',
      content: <BaseInfo />
    },
    roleInfo: {
      label: '角色信息',
      content: <RoleInfo />
    },
  }


  const item = (field: string, key: string) => {
    return (
      <li className='flex flex-col gap-1'>
        <div className='font-semibold'>{field}:</div>
        <div className='text-slate-400'>{userInfo[key]}</div>
      </li>
    )
  }

  return (
    <Page
      pageBody={{
        // padding: { right: false, top: false, bottom: false, left: false },
        className: 'h-full',
      }}
      className={styles.PersonalCenter}
    >
      <div className='flex gap-5 h-full'>
        <aside className='w-3/12 rounded-xl'>
          <div className='rounded-xl py-5 shadow'>
            <div className='flex flex-col items-center justify-center gap-5'>
              <Image width={100} height={100} circular src={userInfo.avatar} />
              <div className='font-black text-lg'>{userInfo.username}</div>
              <div className='px-4 py-1 rounded bg-purple-100'>
                {userInfo.role.roleName}
              </div>
            </div>
            <div className='h-5'></div>
            <ol className='px-5 flex flex-col gap-4'>
              {item('姓名', 'name')}
              {item('电话', 'phone')}
              {item('邮箱', 'email')}
              {item('创建时间', 'createdTime')}
            </ol>
          </div>
          <ol className='rounded-xl p-5 shadow mt-5'>
            {Object.keys(menus).map((key: string) => {
              const item = menus[key]
              return (
                <li
                  key={key}
                  onClick={() => {
                    setActiveTab(key)
                  }}
                  className={getClassNames([
                    'px-5 py-2 rounded transition duration-500 hover:cursor-pointer',
                    {
                      ['bg-slate-200']: activeTab === key
                    }
                  ])}
                >
                  {item.label}
                </li>
              )
            })}
          </ol>
          <Button className='w-full mt-5' >
            退出登录
          </Button>
        </aside>
        <main className='flex-1 overflow-auto'>
          {menus[activeTab].content}
        </main>
      </div>
    </Page >
  )
}
export default PersonalCenter